<?=$this->load->view('user_include_top',null)?> 
<?
    function show_countries_by_area(&$countries, $area_name, $index=1) {
        $i = 1;
        $more = "";
        foreach($countries as $v){
            if($v['area_name'] == $area_name) {
                $name = $v['cn_name'];
                $str = "<span class='item' onclick=\"javascript:select_country(".$v['id'].",'".$v['cn_name']."', '".$v['short_name']."', ".$v['is_schengen'].");\">".$name."</span>　"; 
                if($i++ < 13) {
                   echo $str;
                }  else {
                    break;
                }
            } 
        }
    }

?>
<style> 
    .item {color:#05a; cursor:pointer} 
</style>
<div style="width:100%;padding:1px;"> 
   <div id="focus">
      <ul>
        <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/banner4.jpg" alt="宣传广告条" /></a></li>
        <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/banner3.jpg" alt="宣传广告条" /></a></li>
        <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/banner2.jpg" alt="宣传广告条" /></a></li>
        <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/banner1.jpg" alt="宣传广告条" /></a></li>
        <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="images/banner.jpg" alt="宣传广告条" /></a></li>
      </ul>
    </div>
	 <div style="margin:auto; width:899px; height:160px;" >
		<div style="float:left; width:620px; border:#ddd 3px solid">
			<table width=100%>
				<tr>
				<td width=85 valign=top>
					<img src="images/index_link_icon_1.gif">
				</td>
				<td style="font-weight:bold; line-height:20px; color:gray">
					亚洲：<?show_countries_by_area($countries, '亚洲')?><br>
					欧洲：<?show_countries_by_area($countries, '欧洲')?><br>
					澳洲：<?show_countries_by_area($countries, '大洋洲')?><br>
					美洲：<?show_countries_by_area($countries, '美洲')?><br>
					非洲：<?show_countries_by_area($countries, '非洲')?><br>
				</td>
				</tr>
				<tr>
				<td width=85>
					<img src="images/index_link_icon_2.gif">
				</td>
				<td style="font-weight:bold; line-height:20px">  
                <?  
                    foreach($visa_purpose_array as $k=>$v) {
                        echo "<a href='user/countries?visa_purpose=$k'>$v</a>　";
                    }
                ?>
				</td>
				</tr>
			</table>
		</div>
		<div style="float:right; width:270px">
			<table width=100%>
				<form name="loginform">
				<tr><td bgcolor="#186BDD" style="color:white;font-weight:bold;padding:6px">会员登录</td></tr>
				<tr><td align=center>用户名：<input type="text" style="width:160px" id="uid"><br>密　码：<input type="password" style="width:160px" id="pwd" onkeydown="if(event.keyCode==13){do_login()}"><br>验证码：<input type="text" style="width:76px" id="ac" onkeydown="if(event.keyCode==13){do_login()}">            <img id="acimg" width=80 height=20 src="<?=base_url()?>user/authcode?r=<?echo time()?>" align="absmiddle" onclick="document.getElementById('acimg').src = '<?=base_url()?>user/authcode?r='+new Date().getTime()" style="cursor:pointer;">  </td></tr>
				<tr><td align=center><input type="button" value="登　录" onclick="do_login();" id=btnLogin>　<input type="button" value="注　册" onclick="window.location='user/register'"></td></tr>
				</form>
			</table>
			<script> 
			var base_url = "<?=base_url()?>";   
			var default_page = "user/list_forms"; 
			</script>
			<script src="js/login.js"></script>
		</div>
	 </div> 
      
    <div class="dibu">
      <div class="anniu"><a href="#"><img src="images/guojia.gif" /></a>&nbsp;&nbsp;<a href="#"><img src="images/bangzhu.gif" /></a>&nbsp;&nbsp;&nbsp;</div>
      <div class="xinxi">
        <div class="part">
          <div class="title">
            <ul>
              <li class="xx">护照服务</li>
              <li>简介</li>
            </ul>
            <div class="more"><a href="#"><img src="images/more.gif" /></a></div>
          </div>
          <div class="wenzi"> 本流程为办理因私护照的基本流程，各个地区的具体办事流程和需要的材料会有细微差别。
            办理因私手续因其程序相对简便；不需复杂地办理《出国任务通知书》、《政审批件》等手续；加之持因私护照出国一次，下次再次持因私护照出国仅需联系国外邀请函... </div>
        </div>
        <div class="part">
          <div class="title">
            <ul>
              <li class="xx">签证服务</li>
              <li>港澳通行证服务</li>
            </ul>
            <div class="more"><a href="#"><img src="images/more.gif" /></a></div>
          </div>
          <div class="wenzi"> 目前可代办泰国、马来西亚、印度、印尼、沙特、越南、土耳其、比利时、加拿大、意大利、南非等90多个国家的因私签证申请，其中日本、韩国、新加坡、菲律宾、巴基斯坦、斯里兰卡、土耳其、埃及、澳大利亚、新西兰、秘鲁和巴西驻... </div>
        </div>
      </div>
      
      <div> </div>
      <div style="width:100%; float:left; margin-top:20px; text-align:right"><img src="images/dizi.gif"></div>
</div>


<script type="text/javascript">
     function select_country(id, cn_name, short_name, is_schengen) {
         window.location = "<?=base_url()?>user/countries?id="+id+"&cn_name="+encodeURI(cn_name)+"&short_name="+short_name+"&is_schengen="+is_schengen;
     } 

    $(function() {
        var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
        var len = $("#focus ul li").length; //获取焦点图个数
        var index = 0;
        var picTimer;
        
        //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
        var btn = "<div class='btnBg'></div><div class='btn'>";
        for(var i=0; i < len; i++) {
            btn += "<span></span>";
        }
        btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
        $("#focus").append(btn);
        $("#focus .btnBg").css("opacity",0.5);

        //为小按钮添加鼠标滑入事件，以显示相应的内容
        $("#focus .btn span").css("opacity",0.4).mouseenter(function() {
            index = $("#focus .btn span").index(this);
            showPics(index);
        }).eq(0).trigger("mouseenter");

        //上一页、下一页按钮透明度处理
        $("#focus .preNext").css("opacity",0.2).hover(function() {
            $(this).stop(true,false).animate({"opacity":"0.5"},300);
        },function() {
            $(this).stop(true,false).animate({"opacity":"0.2"},300);
        });

        //上一页按钮
        $("#focus .pre").click(function() {
            index -= 1;
            if(index == -1) {index = len - 1;}
            showPics(index);
        });

        //下一页按钮
        $("#focus .next").click(function() {
            index += 1;
            if(index == len) {index = 0;}
            showPics(index);
        });

        //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
        $("#focus ul").css("width",sWidth * (len));
        
        //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
        $("#focus").hover(function() {
            clearInterval(picTimer);
        },function() {
            picTimer = setInterval(function() {
                showPics(index);
                index++;
                if(index == len) {index = 0;}
            },4000); //此4000代表自动播放的间隔，单位：毫秒
        }).trigger("mouseleave");
        
        //显示图片函数，根据接收的index值显示相应的内容
        function showPics(index) { //普通切换
            var nowLeft = -index*sWidth; //根据index值计算ul元素的left值
            $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position
            //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
            $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果
        }
    });     
</script>
<?=$this->load->view('user_include_bottom',null)?>     